<template>
  <div class="infinite-container">
   <mu-list class="bgwhite">
      <mu-list-item title="姓名">
        <mu-text-field v-model="form.realName" slot="right" class="mt15" inputClass="text-right" :disabled="action=='modify'"></mu-text-field>
      </mu-list-item>
      <mu-divider></mu-divider>

      <mu-list-item title="关系"  @click="selectrelation">
        <span class="list-right-title" >{{message.relation}}</span>
        <i slot="right" class="iconfont icon-small-arrow-right"></i>
      </mu-list-item>
      <mu-divider></mu-divider>

      <mu-list-item title="证件类型"  @click="selectCard">
        <span class="list-right-title" >{{message.cardType}}</span>
            <i slot="right" class="iconfont icon-small-arrow-right"></i>
      </mu-list-item>
      <mu-divider></mu-divider>

      <mu-list-item title="证件号码">
        <mu-text-field v-model="form.cardNumber" slot="right" type="text" class="mt15" inputClass="text-right" :disabled="action=='modify'">
        </mu-text-field>
      </mu-list-item>
      <mu-divider></mu-divider>

      <mu-list-item title="性别">
        <div slot="right">
          <mu-radio name="sexGroup" v-model="sex" label="男" nativeValue="1" ></mu-radio>
          <mu-radio name="sexGroup" v-model="sex" label="女" nativeValue="2" ></mu-radio>
        </div>
      </mu-list-item>
      <mu-divider></mu-divider>

      <mu-list-item title="出生日期">
        <mu-date-picker  v-model="bornDate" slot="right" inputClass="text-right" ></mu-date-picker>
      </mu-list-item>
      <mu-divider></mu-divider>

      <mu-list-item title="手机号码">
        <mu-text-field v-model="form.phoneNumber"   type="number" slot="right" class="mt15" hintText="" inputClass="text-right" :disabled="isphoneedit">
        </mu-text-field>
      </mu-list-item>
   </mu-list>

  <selector :option="selectorOption" @change="setSelectedOption"></selector>


  <mu-flexbox :gutter="0" style="margin-top:4em;" v-if="this.$route.query.action !== 'modify'">
    <mu-flexbox-item grow="2"></mu-flexbox-item>
    <mu-flexbox-item grow="16">
      <mu-raised-button class="btn-login" :class="[loginDisabled ? 'disabled' : '']" label="保存" fullWidth primary @click="submitForm"></mu-raised-button>
    </mu-flexbox-item>
    <mu-flexbox-item grow="2"></mu-flexbox-item>
  </mu-flexbox>

  <mu-flexbox :gutter="0" style="margin-top:4em;" v-if="this.$route.query.action === 'modify'">
    <mu-flexbox-item grow="2"></mu-flexbox-item>
    <mu-flexbox-item grow="16">
      <mu-raised-button class="btn-login"  @click="delFamily" label="删除就诊人" fullWidth secondary></mu-raised-button>
    </mu-flexbox-item>
    <mu-flexbox-item grow="2"></mu-flexbox-item>
  </mu-flexbox>


  <mu-dialog :open="dialog" @close="close">
    此操作将永久删除该就诊人, 是否继续?
    <mu-flat-button slot="actions" @click="dialog=false" default label="取消"/>
    <mu-flat-button slot="actions" primary @click="confirmDelete" label="确定"/>
  </mu-dialog>
  </div>
</template>

<script>
import {commonAjax} from '../../api/api'
import {testEmpty, getBirthdayFromIdCard, getSexFromIdCard} from '../../common/js/util'
import Selector from '../../components/Selector'
import {CARD_TYPE, FAMILY_RALATION} from '../../api/const'

export default {
  components: {Selector},
  data () {
    return {
      dialog: false,
      action: 'add',
      form: {
        relation: '0',
        phoneNumber: '',
        cardType: '1',
        cardNumber: '',
        realName: '',
        id: ''
      },
      message: {
        relation: '请选择',
        cardType: '请选择'
      },
      bornDate: '',
      sex: '',
      selectorOption: {
      }
    }
  },
  watch: {
    'form.cardNumber': function (val) {
      if (this.form.cardType === '1') {
        this.bornDate = getBirthdayFromIdCard(val)
        this.sex = getSexFromIdCard(val)
      }
    }
  },
  computed: {
    loginDisabled () {
      return testEmpty(this.form.realName) || testEmpty(this.form.cardNumber) || testEmpty(this.bornDate)
    },
    isphoneedit () {
      if (this.action === 'add') {
        return false
      } else {
        if (this.form.relation === '0') {
          return true
        } else {
          return false
        }
      }
    }
  },
  mounted () {
    if (this.$route.query.action === 'modify') {
      this.action = 'modify'
      let editFamily = JSON.parse(localStorage.editFamily)
      this.form = {
        relation: editFamily.relation,
        phoneNumber: editFamily.mobile,
        cardType: editFamily.cardtype,
        cardNumber: editFamily.idcard,
        realName: editFamily.realname,
        id: editFamily.id
      }
      this.message.cardType = this.getCardName(editFamily.cardtype)
      this.message.relation = this.getFamilyrelation(editFamily.relation)
    }
  },
  methods: {
    submitForm () {
      if (this.loginDisabled) {
        return false
      }
      let params = {
        openid: localStorage.openId,
        mobile: this.form.phoneNumber,
        realname: this.form.realName,
        relation: this.form.relation,
        cardtype: this.form.cardType,
        idcard: this.form.cardNumber,
        sexcode: this.sex,
        birthdate: this.bornDate
      }
      this.$store.commit('UPDATE_LOADING')
      commonAjax('user/addMember', params).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1) {
          this.$store.commit('UPDATE_TOAST', {
            message: '操作成功',
            fn: () => this.$router.replace('/setting/family')
          })
        }
      })
    },
    getCardName (cardType) {
      return CARD_TYPE.filter(v => v.value === cardType)[0].label
    },
    getFamilyrelation (relation) {
      if (relation === '0') {
        return '自己'
      }
      return FAMILY_RALATION.filter(v => v.value === relation)[0].label
    },
    delFamily (f) {
      if (!this.form.id) {
        return false
      }
      this.dialog = true
    },
    close () {
      this.dialog = false
    },
    confirmDelete () {
      this.$store.commit('UPDATE_LOADING')
      commonAjax('user/removeMember', {id: this.form.id}).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1) {
          this.$store.commit('UPDATE_TOAST', {
            message: '删除成功',
            fn: this.$router.replace('/setting/family')
          })
        } else {
          this.close()
          this.$store.commit('UPDATE_TOAST', {message: res.data.msg})
        }
      })
    },
    selectrelation () {
      // if (this.disabled.relation) {
      //   return false
      // }
      this.selectorOption = {
        show: true,
        title: '选择关系',
        data: FAMILY_RALATION
      }
      this.setSelectedOption = (item) => {
        this.form.relation = item.value
        this.message.relation = item.label
      }
    },
    selectCard () {
      // if (this.disabled.cardType) {
      //   return false
      // }
      this.selectorOption = {
        show: true,
        title: '选择性别',
        data: CARD_TYPE
      }
      this.setSelectedOption = (item) => {
        this.form.cardType = item.value
        this.message.cardType = item.label
      }
    },
    setSelectedOption () {
    }
  },
  destroyed () {
    this.$store.commit('UPDATE_TITLE')
  }
}
</script>
